<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <!-- input 输入的值 默认是string类型 -->
    <!-- 如果想转成number 给v-model后面加上.number操作符 -->
    <!-- <input type="number" v-model.number='numVal'> -->
    <input type="text" v-model.number='numVal'>
    <input type="text" v-model.trim='str'>
    <!-- trim操作符 删除输入框开头和结尾的空格 无法删除中间的空格 -->
    <input type="text" v-model.lazy='lang'>
    <div v-text='lang'></div>
    <!-- v-model 是用户输入内容，触发input事件就能够打印。 v-model.lazy 是当用户输入内容以后，鼠标离开输入框以后触发change事件 -->
    <button @click=' handle'>按钮</button>
  </div>
  <script src="../vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        numVal: '',
        str: '',
        lang: ''
      },
      methods: {
        handle() {
          console.log(this.lang);
          console.log(this.str.length);
          console.log(typeof this.numVal);
        }
      }
    })
  </script>
</body>

</html>